'use client';
import { useSetState } from 'ahooks';
import {
  Suspense,
  lazy,
  memo,
  useEffect,
  useLayoutEffect,
  useRef,
} from 'react';
import classNames from 'classnames';

import styles from './index.module.scss';
import Content from './edit/index';
import { getFontScale } from '@/util';
import { validResume } from '@/service';
import Confirm from '@/app/components/Confirm';
import { useCommonStore } from '@/src/providers/common-store-provider';
import Tabs from '@/app/components/Tabs';
import { forbidChangeFontsize, isAndroid } from '@/app/utils';
import TabItem from '@/app/components/Tabs/TabItem';
import ScrollWrapper from '@/app/components/ScrollWrapper';
import Loading from '@/app/components/Loading';
import Login from '@/app/components/Login';
import Siderbar from './siderbar';
import Previer from './previer';

const ContentItemEdit = lazy(async () => {
  return import('./edit/contentItem/edit');
});

const Customization = lazy(async () => {
  return import('./customization');
});
const PersonalDetailEdit = lazy(async () => {
  return import('./edit/personalDetail/personalDetailEdit');
});
export const totalContent = [
  'education',
  'work',
  'project',
  'school',
  'internship',
  'certificate',
  'skills',
  'selfevaluation',
  'hobby',
  'custom',
] as Sections[];

function Index({ id, token }) {
  const leftPart = useRef(null);
  const {
    showLogin,
    isMobile,
    downloading,
    currentTab,
    setCurrentTab,
    setFontScale,
  } = useCommonStore((state) => state);

  const [state, setState] = useSetState({
    current: '',
    showPreview: false,
  });
  useLayoutEffect(() => {
    if (isAndroid()) {
      forbidChangeFontsize();
    }
    if (isMobile && isAndroid()) {
      setFontScale(getFontScale());
    }
  }, []);
  useEffect(() => {
    if (token && !id) {
      // validResume({ token: token }).then((res) => {
      //   if (res.code === 200 && res.data) {
      //     Confirm({
      //       title: "提示",
      //       content: "您已创建过1份简历！是否去查看",
      //       okText: "确认",
      //       cancelText: "取消",
      //       onOk() {
      //         location.href = "/my/cv";
      //       },
      //     });
      //   }
      // });
    }
  }, []);
  const mainStyle: any = {};
  if (currentTab !== 'content' && currentTab !== 'customize') {
    if (!isMobile) {
      mainStyle.marginLeft = '10px';
    } else {
      mainStyle.margin = '0';
    }
  }
  return (
    <>
      <div className={styles.content}>
        <div className={styles.leftPart} ref={leftPart}>
          {currentTab === 'content' || currentTab === 'customize' ? (
            <Siderbar
              active={currentTab}
              onChange={(e) => {
                if (e === 'preview') {
                  setState({
                    showPreview: true,
                    current: 'preview',
                  });
                  return;
                }
                setCurrentTab(e);
              }}
            ></Siderbar>
          ) : null}
          <div className={styles.main} style={mainStyle}>
            <Tabs active={currentTab}>
              <TabItem key={'content'} removeOnLeave={true}>
                <Content></Content>
              </TabItem>
              <TabItem key={'customize'} removeOnLeave={true}>
                <ScrollWrapper>
                  <Suspense
                    fallback={
                      <div
                        style={{
                          width: '100%',
                          height: '100%',
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}
                      >
                        <Loading
                          style={{
                            width: '100%',
                            height: '100vh',
                            color: '#a4a4a4',
                            position: 'relative',
                          }}
                        ></Loading>
                      </div>
                    }
                  >
                    <Customization></Customization>
                  </Suspense>
                </ScrollWrapper>
              </TabItem>
              <TabItem key={'personalDetailEdit'} removeOnLeave={true}>
                <ScrollWrapper>
                  <Suspense
                    fallback={
                      <div
                        style={{
                          width: '100%',
                          height: '100%',
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                        }}
                      >
                        <Loading
                          style={{
                            width: '100%',
                            height: '100vh',
                            color: '#a4a4a4',
                            position: 'relative',
                          }}
                        ></Loading>
                      </div>
                    }
                  >
                    <PersonalDetailEdit />
                  </Suspense>
                </ScrollWrapper>
              </TabItem>
              {totalContent.map((item: Sections) => {
                return (
                  <TabItem key={`${item}Edit`} removeOnLeave={true}>
                    <ScrollWrapper>
                      <Suspense
                        fallback={
                          <div
                            style={{
                              width: '100%',
                              height: '100%',
                              display: 'flex',
                              justifyContent: 'center',
                              alignItems: 'center',
                            }}
                          >
                            <Loading
                              style={{
                                width: '100%',
                                height: '100vh',
                                color: '#a4a4a4',
                                position: 'relative',
                              }}
                            ></Loading>
                          </div>
                        }
                      >
                        <ContentItemEdit key={item} type={item} />
                      </Suspense>
                    </ScrollWrapper>
                  </TabItem>
                );
              })}
            </Tabs>
          </div>
        </div>
        {isMobile ? (
          <Tabs active={state.current}>
            <TabItem key={'preview'}>
              <div
                className={classNames(styles.previewWraper, {
                  [styles.showPreview]: state.showPreview,
                })}
                onClick={() => {
                  setState({
                    showPreview: false,
                  });
                }}
              >
                <Previer leftPart={leftPart}></Previer>
              </div>
            </TabItem>
          </Tabs>
        ) : (
          <div
            className={classNames(styles.previewWraper, {
              [styles.showPreview]: state.showPreview,
            })}
            onClick={() => {
              setState({
                showPreview: false,
              });
            }}
          >
            <Previer leftPart={leftPart}></Previer>
          </div>
        )}

        {/* {showLogin ? <Login></Login> : null} */}
      </div>
      {downloading ? <Loading /> : null}
    </>
  );
}

export default memo(Index);
